<template>
  <el-menu
      mode="vertical"
      :collapse="isCollapse"
      :default-active="activePath"
      background-color="#0f172a"
      text-color="#94a3b8"
      active-text-color="#ffffff"
      :collapse-transition="false"
      @select="handleMenuSelect"
  >
    <!-- 引入子项组件进行递归渲染 -->
    <SidebarMenuItem
        :routes="routes"
        base-path=""
    />
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SidebarMenuItem from './SidebarMenuItem.vue'
import routes from '@/router/index.js'

const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
})

const route = useRoute()
const router = useRouter()

// 获取当前激活的路由路径
const activePath = computed(() => {
  return route.path
})

// 处理菜单选择事件
const handleMenuSelect = (path) => {
  router.push(path)
}
</script>
